﻿$(function() {
    var piechart1 = echarts.init(document.getElementById('piechart1'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            bottom: '20',
            data: []
        },
        backgroundColor: '#e0e0e0',
        color:['#61c0de','#00b19d','#f7aa47','#ff6264','#999933','#0084c5','#ff8463','#9bca62','#fad75f','#003366'],
        series: [{
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: [],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    formatter: '{b}\n{c}元'
                }
            }
        }]
    };
    piechart1.setOption(option);

    var piechart2 = echarts.init(document.getElementById('piechart2'));
    option2 = {
        tooltip: {
            trigger: 'item',
            formatter: "{b}({d}%)"
        },
        legend: {
            orient: 'horizontal',
            bottom: '20',
            data: [] //['满载','空载','停机','其他']
        },
        backgroundColor: '#e0e0e0',
        color:['#ff6264','#61c0de','#00b19d','#f7aa47','#999933','#0084c5','#ff8463','#9bca62','#fad75f','#003366'],
        series: [{
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    formatter: '{b}\n{c}小时'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '10',
                        fontWeight: 'bold'
                    }
                }
            },
            data: []
        }]
    };
    piechart2.setOption(option2);

    /**
	 * 耗电情况
	 * */
    var dayline = echarts.init(document.getElementById('dayline'));
    optionline = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        backgroundColor: '#e0e0e0',
        color:["#8dc63f","#40bbea","#F3A43B","#cc3f44"],
        grid: {
            top: '10%',
            left: '4%',
            right: '5%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            bottom: '30',
            data: ['电度趋势']
        },
        xAxis: {
            type: 'category',
            boundaryGap: [1, 1],
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '电度趋势(度)',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            bottom: 1
        },
        series: [{
            name: '电度趋势',
            type: 'line',
            data: [],
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最高电度'
                },
                {
                    type: 'min',
                    name: '最低电度'
                }]
            }
        }]
    };
    dayline.setOption(optionline);

    /**
	 * 状态时长
	 * */
    var ratebar1 = echarts.init(document.getElementById('daybar'));
    optionbar1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            left: '4%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            bottom: '30',
            data: [] 
        },
        backgroundColor: '#e0e0e0',
        color:['#ff6264','#61c0de','#00b19d','#f7aa47','#999933','#0084c5','#ff8463','#9bca62','#fad75f','#003366'],
        xAxis: {
            type: 'category',
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '状态时长(小时)',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            bottom: 1
        },
        series: []
    };
    ratebar1.setOption(optionbar1);
    var lineId = 0;
    var equId = 0;
    var startMonth = 1;
    var endMonth = 1;
    var year = moment().year();

    /**
     * slider滑动事件
     * */
    $('#ss').slider({
        range: true,
        max: 12,
        tipFormatter: function(value) {
            return "第" + value + "月";
        },
        onComplete: function(value) { //滑块值改变时触发
            startMonth = value[0];
            endMonth = value[1];
            getData();
        }
    });

    /**
     * 初始化
     * */
    var vm = new Vue({
        el: '#itemData',
        data: {
            item: []
        }
    });

    var weeks = [1, moment().month() + 1];
    $('#ss').slider('setValues', weeks);
    var arr = $('#ss').slider('getValues');
    startMonth = arr[0];
    endMonth = arr[1];
    getData();

    function getData() {
        $("#cc").combobox('setValue', startMonth);
        $.post(basePath + "/single/singlelComprehensive/month.json", {
            "lineId": lineId,
            "equId": equId,
            year: year,
            startTime: startMonth,
            endTime: endMonth
        },
        function(res) {
            vm.$set('item', res);
            if (res.success) {
                piechart1.setOption({
                    legend: {
                        data: res.pieLendge_F
                    },
                    series: [{
                        data: res.pieFValue
                    }]
                });
                piechart2.setOption({
                    legend: {
                        data: res.pieLendge_S
                    },
                    series: [{
                        data: res.pieSValue
                    }]
                });
                dayline.setOption({
                    xAxis: {
                        data: res.xTimes
                    },
                    series: [{
                        data: res.yValue_D
                    }]
                });
                var series = [];
                for (var i = 0; i < res.yValue_S.length; i++) {
                    series.push({
                        name: res.yValue_S[i].name,
                        stack: '总量',
                        type: 'bar',
                        barMaxWidth: 40,
                        data: res.yValue_S[i].value
                    });
                }
                ratebar1.setOption({
                    legend: {
                        data: res.pieLendge_S
                    },
                    xAxis: {
                        data: res.xTimes
                    },
                    series: series
                });
            } else {
                alert(res.msg);
            }
        });
    }

    //点击事件
    $("#defineTime").click(function() {
        var mePanel = $('#defineTimeWin');
        mePanel.dialog('open');
    });
    //定义时间的表单
    $('#defineTimeWin').dialog({
        title: '自定义时间',
        width: 400,
        height: 150,
        iconCls: 'icon-add',
        closed: true,
        modal: true,
        inline: true,
        buttons: [{
            text: '确定',
            iconCls: 'icon-add-new',
            handler: function() {
                var st = $("input[name='startTime']").val();
                year = st;
                getData();
                $('#defineTimeWin').dialog('close');

            }
        },
        {
            text: '取消',
            iconCls: 'icon-redo',
            handler: function() {
                $('#defineTimeWin').dialog('close');
            }
        }],
        onClose: function() {
            $('#defineTimeform').form('reset');
        }
    });
    /**
	  * 切换设备的点击事件
	  * */
    var mePanel = $('#switchEquip');
    $("#linetree").tree({
        onClick: function(node) {
            if (node.url) {
                lineId = node.id;
                var lineGrid = $('#lines_data');
                lineGrid.datagrid('load', {
                    lineId: node.id
                });
                lineGrid.datagrid('getPanel').panel('setTitle', node.text);
            }
        }
    });
    $('#lines_data').datagrid({
        //双击设备时，根据选中设备刷新
        onDblClickRow: function(rowIndex, rowData) {
            lineId = rowData.lineId;
            equId = rowData.id;
            var arr = $('#ss').slider('getValues');
            startMonth = arr[0];
            endMonth = arr[1];
            getData();
            mePanel.dialog('close');
        }
    });
    $("#switchEquipOK").click(function() {
        var row = $('#lines_data').datagrid('getSelected');
        if (row) {
            lineId = row.lineId;
            equId = row.id;
            var arr = $('#ss').slider('getValues');
            startMonth = arr[0];
            endMonth = arr[1];
            getData();
            $('#switchEquip').dialog('close');
        } else {
            $.messager.alert({
                showSpeed: 100,
                title: '消息提示',
                msg: '请选择一条设备记录!',
                timeout: 3000
            });
        }
    });
});